<template>
  <div>
    <!-- 搜索 -->
    <el-card style="margin-bottom: 15px">
      <el-form
        :model="queryParams"
        ref="queryFormRef"
        :inline="true"
        label-width="68px"
        style="max-width: 100%"
      >
        <el-form-item label="订单编号" prop="orderNum">
          <el-input
            v-model="queryParams.orderNum"
            placeholder="请输入订单编号"
            clearable
            @keyup.enter="handleQuery"
            class="!w-240px"
          />
        </el-form-item>
        <el-form-item label="订单状态" prop="orderStatus" style="width: 15%">
          <el-select
            v-model="queryParams.orderStatus"
            placeholder="请选择订单状态"
            clearable
          >
            <el-option
              v-for="orderStatus in statusList"
              :key="orderStatus.value"
              :label="orderStatus.label"
              :value="orderStatus.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间" prop="createTime">
          <el-date-picker
            v-model="queryParams.createTime"
            value-format="YYYY-MM-DD HH:mm:ss"
            type="datetimerange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item>
          <el-button @click="handleQuery"> 搜索 </el-button>
          <el-button @click="resetQuery"> 重置 </el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card>
      <el-table v-loading="loading" :data="list">
        <el-table-column
          label="订单编号"
          align="center"
          prop="orderNum"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="订单内容"
          align="center"
          prop="orderContent"
          :show-overflow-tooltip="true"
        />
        <el-table-column label="订单状态" align="center" prop="orderStatus">
          <template #default="scope">
            <el-tag type="primary" v-if="scope.row.orderStatus === 0"
              >待报价</el-tag
            >
            <el-tag type="primary" v-if="scope.row.orderStatus === 1"
              >待支付</el-tag
            >
            <el-tag type="primary" v-if="scope.row.orderStatus === 2"
              >待确认</el-tag
            >
            <el-tag type="primary" v-if="scope.row.orderStatus === 3"
              >待交付</el-tag
            >
            <el-tag type="success" v-if="scope.row.orderStatus === 4"
              >已交付</el-tag
            >
            <el-tag type="success" v-if="scope.row.orderStatus === 5"
              >已完成</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column label="订单金额" align="center" prop="quote">
          <template #default="scope">
            <el-tooltip
              v-if="scope.row.quoteFile"
              class="box-item"
              effect="dark"
              content="点击下载报价单"
              placement="top"
            >
              <el-link :href="scope.row.url" target="_blank">
                {{ scope.row.quote === null ? "-" : scope.row.quote + "元" }}
              </el-link>
            </el-tooltip>
            <span v-else
              >{{ scope.row.quote === null ? "-" : scope.row.quote + "元" }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          label="创建时间"
          align="center"
          prop="createTime"
          :formatter="dateFormatter"
        />
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <div class="flex items-center justify-center">
              <el-button
                type="primary"
                link
                @click="handleInfo(scope.row.orderId)"
              >
                订单详情
              </el-button>
              <el-button
                type="primary"
                link
                v-if="scope.row.orderStatus !== 0 && scope.row.payStatus !== 2"
                @click="handlePayOrder(scope.row)"
              >
                支付订单
              </el-button>
              <el-button
                type="danger"
                link
                @click="handleDelete(scope.row.orderId)"
              >
                关闭订单
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="float: right; padding: 1%"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        v-model:page="queryParams.pageNo"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </el-card>
  </div>
  <!-- 支付订单 -->
  <PayOrder ref="payOrderRef" @success="getList" />
</template>
<script setup>
import { ref, reactive, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { service } from "@/config/service";
import dayjs from "dayjs";
import PayOrder from "./payOrder.vue";
import { useRouter } from "vue-router";
const router = useRouter();
const loading = ref(true); // 列表的加载中
const total = ref(0); // 列表的总页数
const list = ref();
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  orderStatus: undefined,
  createTime: [],
});
const queryFormRef = ref(); // 搜索的表单
const statusList = ref([
  {
    label: "待报价",
    value: "0",
  },
  {
    label: "待支付",
    value: "1",
  },
  {
    label: "待确认",
    value: "2",
  },
  {
    label: "待交付",
    value: "3",
  },
  {
    label: "已交付",
    value: "4",
  },
  {
    label: "已完成",
    value: "5",
  },
]);
/** 查询列表 */
const getList = async () => {
  loading.value = true;
  try {
    const data = await service.get("/orderManage/formList", {
      params: queryParams,
    });
    data?.data?.records &&
      data.data.records.forEach((item) => {
        if (item.quoteFile) {
          const File = JSON.parse(item.quoteFile);
          item.url = File[0].url;
        } else {
          item.url = "";
        }
      });
    const node = await service.get("/financeConfirmManage/getServices");
    node.data.filter((d) => {
      data?.data?.records &&
        data.data.records.filter((c) => {
          if (c.orderContent == d.value) {
            c.orderContent = d.label;
          }
        });
    });
    list.value = data?.data?.records || [];
    total.value = data?.data?.total || 0;
  } finally {
    loading.value = false;
  }
};

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1;
  getList();
};

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value?.resetFields();
  handleQuery();
};

/** 支付订单 */
const payOrderRef = ref();
const handlePayOrder = (row) => {
  payOrderRef.value.open(row);
};

/** 删除按钮操作 */
const handleDelete = async (orderId) => {
  // 删除的二次确认
  ElMessageBox.confirm("是否确认关闭订单？", "关闭订单", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      // 发起删除
      await service.delete("/orderManage/deleteOrder", {
        params: { orderId: orderId },
      });
      // 刷新列表
      await getList();
      ElMessage({
        type: "success",
        message: "关闭成功",
      });
    })
    .catch(() => {});
};
const handleInfo = (id) => {
  router.push({ path: "/orderManage/orderDetail", query: { id } });
};
const dateFormatter = (row, column, cellValue) => {
  return dayjs(cellValue).format("YYYY-MM-DD HH:mm:ss");
};

/** 初始化 */
onMounted(() => {
  getList();
});
</script>
<style scoped lang="scss">
.el-form {
  &-item {
    margin-bottom: 0;
  }
}
</style>
